<template>
  <div class="demo">
    <h1>{{name}}</h1>
    <h2>{{age}}</h2>
    <button @click="add">点我age++</button>
    <button @click="sendName">把学生名（自定义事件）给APP</button>
    <button @click="unbind">解绑getStudentName事件</button>
    <button v-on:click="death">销毁当前Student组件的实例</button>
  </div>
</template>

<script>

export default {
  name: 'StudentView',
  data() {
    return {
      name: 'Zoe',
      age: 18,
    }
  },
  methods: {
    add() {
      console.log('调用了age++')
      this.age++;
    },
    sendName() {
      this.$emit('getStudentName', this.name)
    },
    unbind() {
      // this.$off('getStudentName')
      // this.$off(['getStudentName'])
      this.$off() // 解绑所有的自定义事件
    },
    death() {
      // 销毁了当前Student组件的实例，销毁后所有Student实例的自定义事件全都不奏效
      this.$destroy()
    }
  }
}
</script>

<style>
  .demo {
    margin-top: 20px;
    background: pink;
    border: 1px solid pink;
    padding: 10px;
    margin-bottom: 20px;
  }
</style>